<template>
    <el-card class="mb-20" shadow="hover">
        <div slot="header" class="clearfix">
            <span>采购单审核</span>
            <el-button type="primary" icon="el-icon-refresh" @click="searchAllselect">刷新列表</el-button>
        </div>

        <el-form :model="searchForm" class="mb-20" inline>
            <el-form-item label="申请时间">
                <el-date-picker
                    v-model="searchForm.procureTime"
                    type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.checkTag" placeholder="请选择状态">
                    <el-option label="等待审核" value="S001-0"></el-option>
                    <el-option label="审核通过" value="S001-1" style="color: #67c23a"></el-option>
                    <el-option label="审核不通过" value="S001-2" style="color: #f56c6c"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchselect">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="reviewList"
            stripe
            border
            style="width: 100%"
            v-loading="loading"
            empty-text="暂无数据"
        >
            <el-table-column label="申请单号" prop="procureNumber" width="120"></el-table-column>
            <el-table-column label="申请人" prop="adminname" width="100"></el-table-column>
            <el-table-column label="供应商" prop="supplierName"></el-table-column>
            <el-table-column label="总金额" prop="procurePrice" width="100">
                <template slot-scope="scope">￥{{ formatPrice(scope.row.procurePrice) }}</template>
            </el-table-column>
            <el-table-column label="申请时间" prop="procureTime" width="180">
                <template slot-scope="scope">
                    {{ scope.row.procureTime | formatDate }}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="getTagType(scope.row.checkTag)">
                        {{ getStatusText(scope.row.checkTag) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        icon="el-icon-check"
                        size="mini"
                        @click="handleApprove(scope.row.id)"
                    >审核通过</el-button>

                    <el-button
                        type="danger"
                        icon="el-icon-close"
                        size="mini"
                        class="ml-10"
                        @click="handleReject(scope.row.id)"
                    >拒绝审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="mt-20" v-if="reviewList.length">
            <el-pagination
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                procureTime: [],
                checkTag: ''
            },
            reviewList: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            loading: false,
        }
    },
    filters: {
        formatDate(time) {
            if (time) {
                const date = new Date(time);
                return date.toLocaleDateString().replace(/\//g, '-');
            }
            return '--';
        }
    },
    methods: {
        search() {
            this.loading = true;
            // const params = {
            //     currentPage: this.currentPage,
            //     pageSize: this.pageSize,
            //     procureVo: {
            //         procureTime: this.searchForm.procureTime, // 修正为 procureTime
            //         checkTag: this.searchForm.checkTag // 修正为 checkTag
            //     }
            // };


            const params = {
                    procureTime: this.searchForm.procureTime, // 修正为 procureTime
                    checkTag: this.searchForm.checkTag // 修正为 checkTag
            }


            this.$axios.post(`/procure/selectAll/${this.currentPage}/${this.pageSize}`, params)
                .then(r => {
                    this.reviewList = r.data.list;
                    this.total = r.data.total;
                    console.log('采购单列表数据：', this.reviewList);
                })
                .catch(error => {
                    console.error('请求出错：', error);
                    this.$message.error('请求失败，请重试');
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        //  审核通过
        handleApprove(id) {
            this.$confirm('确认通过该采购单？', '审核', { type: 'success' })
                .then(() => {
                    this.$axios.post(`/procure/approve/${id}`)
                        .then(() => {
                            this.$message.success('审核通过！');
                            this.search(); // 刷新列表
                        })
                        .catch(error => {
                            console.error('审核通过请求出错：', error);
                            this.$message.error('审核通过失败，请重试');
                        });
                });
        },
        // 审核不通过
        handleReject(id) {
            this.$confirm('确认拒绝该采购单？', '审核', {
                type: 'warning',
                input: true,
                inputPlaceholder: '请输入拒绝原因'
            }).then((reason) => {
                this.$axios.post(`/procure/reject/${id}`, { reason })
                    .then(() => {
                        this.$message.info(`已拒绝：${reason}`);
                        this.search(); // 刷新列表
                    })
                    .catch(error => {
                        console.error('审核拒绝请求出错：', error);
                        this.$message.error('审核拒绝失败，请重试');
                    });
            });
        },
        handlePageChange(page) {
            this.currentPage = page;
            this.search();
        },
        getStatusText(status) {
            switch (status) {
                case 'S001-0':
                    return '等待审核';
                case 'S001-1':
                    return '审核通过';
                case 'S001-2':
                    return '审核不通过';
                default:
                    return '';
            }
        },
        getTagType(status) {
            switch (status) {
                case 'S001-1':
                    return 'success';
                case 'S001-2':
                    return 'danger';
                default:
                    return 'info';
            }
        },
        formatPrice(price) {
            if (price === undefined || price === null) {
                return '--';
            }
            return parseFloat(price).toFixed(2);
        },
        viewDetail(id) {
            // 这里可以添加查看详情的逻辑，例如跳转到详情页面
            console.log('查看详情，ID:', id);
        },
        // 查询按钮
        searchselect() {
            console.log('查询数据：', this.searchForm);
            // 直接调用 search 方法发送请求
            this.search();
        },
        // 刷新按钮
        searchAllselect() {
            this.searchForm = {
                procureTime: [],
                checkTag: ''
            };
            this.search();
        }
    },
    created() {
        this.search();
    }
}
</script>

<style scoped>
.el-pagination { margin-top: 20px; }
.el-table__header th { background: #f8f9fa; }
</style>